<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :style="styles"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>
<script>
import Vue from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {getAccessToken} from "@/utils/auth";

export default Vue.extend({
  components: {Editor, Toolbar},
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: 300,
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: null,
    },

    // 上传文件大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {
      html: '<p></p>',
      editor: null,
      /**
       * 工具栏配置
       */
      toolbarConfig: {},
      /**
       * 编辑器配置
       */
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          'uploadImage': {
            // 上传文件地址
            server: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload",
            fieldName: 'file',
            maxFileSize: this.fileSize * 1024 * 1024,
            headers: {Authorization: "Bearer " + getAccessToken()},
            // 自定义插入图片
            customInsert(res, insertFn) {
              // 从 res 中找到 url 图片src alt 图片描述文字  href 图片连接 ，然后插入图片
              insertFn(res.data, res.data, res.data)
            }
          },
          'uploadVideo': {
            // 上传文件地址
            server: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload",
            fieldName: 'file',
            maxFileSize: this.fileSize * 1024 * 1024,
            headers: {Authorization: "Bearer " + getAccessToken()},
            // 自定义插入图片
            customInsert(res, insertFn) {
              // 从 res 中找到 url 视频src alt 视频描述文字
              insertFn(res.data, '')
            }
          }
        },

      },
      mode: 'default', // or 'simple'
    }
  },
  computed: {
    styles() {
      let style = {};
      if (this.minHeight) {
        style.minHeight = `${this.minHeight}px`;
      }
      if (this.height) {
        style.height = `${this.height}px`;
      }
      style['overflow-y'] = 'hidden';
      return style;
    },
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      if (this.value && this.value.length > 0) {
        this.html = this.value
      }
    },
    onChange(html) {
      this.$emit('input', this.html)
    },
  },
  watch: {
    value(val) {
      this.html = val
    }
  },
  mounted() {
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
